<template>
  <div>
    <!--查询条件版块-->
    <el-form :inline="true" size="mini" ref="queryForm" label-width="70px" class="custom-form">
      <el-form-item label="登录账号">
        <el-input v-model="queryParams.username" placeholder="输入登录账号"></el-input>
      </el-form-item>
      <el-form-item label="用户姓名">
        <el-input v-model="queryParams.name" placeholder="输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="queryParams.idcard" placeholder="输入身份证号"></el-input>
      </el-form-item>
      <!--<el-form-item label="手机号码">-->
        <!--<el-input v-model="queryParams.phone" placeholder="输入手机号"></el-input>-->
      <!--</el-form-item>-->
      <el-form-item label="警号">
        <el-input v-model="queryParams.policeNum" placeholder="输入警号"></el-input>
      </el-form-item>
      <!--<el-form-item label="警种">-->
        <!--<police-type v-model="queryParams.category"></police-type>-->
      <!--</el-form-item>-->
      <!--<el-form-item label="职位">-->
        <!--<position v-model="queryParams.position"></position>-->
      <!--</el-form-item>-->
      <el-form-item label="现任单位">
        <org v-model="queryParams.currentOrg" :setRoot="false"></org>
      </el-form-item>
      <el-form-item label="角色名称">
        <el-select placeholder="选择角色名称" v-model="queryParams.roleName">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in types" :key="item.type" :label="item.name" :value="item.name"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="状态">
        <available v-model="queryParams.state"></available>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query()">查询</el-button>
      </el-form-item>
    </el-form>

    <!--按钮工具栏-->
    <el-row class="custom-row">
      <el-button size="mini" plain type="primary" v-if="hasPerm('user-add')" @click="openUserForm()"><i class="fa fa-plus-circle"></i>&nbsp;新增用户</el-button>
      <el-button size="mini" plain v-bind:disabled="selectedRows.length==0"
                 v-if="hasPerm('user-sensitive-edit')&&hasPerm('user-enable')" @click="enablePerms(null, true)">
        <i class="fa fa-unlock"></i>&nbsp;启用用户
      </el-button>
      <el-button size="mini" plain v-bind:disabled="selectedRows.length==0"
                 v-if="hasPerm('user-sensitive-edit')&&hasPerm('user-enable')" @click="enablePerms(null, false)">
        <i class="fa fa-lock"></i>&nbsp;禁用用户
      </el-button>
      <el-button size="mini" plain type="danger" v-bind:disabled="selectedRows.length==0"
                 v-if="hasPerm('user-sensitive-edit')&&hasPerm('user-del')" @click="deletePerms()">
        <i class="fa fa-trash"></i>&nbsp;删除用户
      </el-button>
      <el-pagination
        @current-change="query"
        :current-page.sync="queryParams.pageNumber"
        :page-size="queryParams.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="tableDataTotal"
        style="float:right;">
      </el-pagination>
    </el-row>

    <!--查询结果列表-->
    <el-table
      v-loading="loading"
      :data="tableData"
      @selection-change="multiSelectedChange"
      style="width: 100%;margin-top:10px;">
      <el-table-column
        type="selection"
        :selectable="canEditDel"
        width="55">
      </el-table-column>
      <el-table-column
        type="index"
        width="40">
      </el-table-column>
      <el-table-column
        prop="name"
        label="用户姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="policeNum"
        label="警号">
      </el-table-column>
      <el-table-column
        prop="username"
        label="登录账号"
        width="120">
      </el-table-column>
      <!--<el-table-column-->
        <!--show-overflow-tooltip-->
        <!--label="警种">-->
        <!--<template slot-scope="scope">-->
          <!--<el-tag style="margin-right: 5px" type="info" size="medium" v-for="(item, index) in scope.row.policeTypes" :key="index">-->
            <!--{{item.name}}-->
            <!--<span v-if="item.state===0" style="color:#F56C6C;">(禁)</span>-->
          <!--</el-tag>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column
        prop="zw"
        label="现任职务">
      </el-table-column>
      <el-table-column
        prop="zwjbName"
        label="职务级别">
      </el-table-column>
      <el-table-column
        prop="zwlbName"
        label="职务类别">
      </el-table-column>
      <!--<el-table-column-->
        <!--show-overflow-tooltip-->
        <!--label="职位">-->
        <!--<template slot-scope="scope">-->
          <!--<el-tag style="margin-right: 5px" type="info" size="medium" v-for="(item, index) in scope.row.positions" :key="index">-->
            <!--{{item.name}}-->
            <!--<span v-if="item.state===0" style="color:#F56C6C;">(禁)</span>-->
          <!--</el-tag>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column
        show-overflow-tooltip
        prop="roles"
        label="绑定角色" width="120">
        <template slot-scope="scope">
          <span style="color:#F56C6C;" v-if="!scope.row.roles||scope.row.roles.length===0">未绑定</span>
          <el-tag style="margin-right: 5px" type="info" size="medium" v-else v-for="(item, index) in scope.row.roles" :key="index">
            {{item.name}}
            <span v-if="item.state===0" style="color:#F56C6C;">(禁)</span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="idcard"
        label="身份证号">
      </el-table-column>
      <el-table-column
        prop="currentOrgName"
        label="现任单位">
      </el-table-column>
      <!--<el-table-column-->
        <!--prop="temporaryOrgName"-->
        <!--label="临时单位">-->
      <!--</el-table-column>-->
      <el-table-column
        show-overflow-tooltip
        prop="phone"
        label="手机号码">
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态">
        <template slot-scope="scope">
          <el-tag type="success" size="medium" v-if="scope.row.state===1">启用</el-tag>
          <el-tag type="danger" size="medium" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="130">
        <template slot-scope="scope">
          <span v-if="hasPerm('user-sensitive-edit')">
            <el-tooltip class="item" effect="dark" content="修改" v-if="hasPerm('user-edit')">
              <el-button type="text" size="small" @click="openUserForm(scope.row)"><i class="fas fa-edit"></i></el-button>
            </el-tooltip>
            <!--<el-tooltip class="item" effect="dark" content="禁用" v-if="hasPerm('user-enable')">-->
              <!--<el-button type="text" size="small" @click="enablePerms(scope.row.id, false)"><i class="fas fa-ban text-danger"></i></el-button>-->
            <!--</el-tooltip>-->
            <!--<el-tooltip class="item" effect="dark" content="启用" v-if="hasPerm('user-enable')">-->
              <!--<el-button type="text" size="small" @click="enablePerms(scope.row.id, true)"><i class="fas fa-check-circle text-success"></i></el-button>-->
            <!--</el-tooltip>-->
            <!--<el-tooltip class="item" effect="dark" content="删除" v-if="hasPerm('user-del')">-->
              <!--<el-button type="text" size="small" @click="deletePerms(scope.row.id)"><i class="fas fa-trash-alt text-danger"></i></el-button>-->
            <!--</el-tooltip>-->
          </span>
          <span v-else>
            <el-tooltip class="item" effect="dark" content="修改" v-if="hasPerm('user-edit')">
              <el-button type="text" size="small" @click="openUserForm(scope.row)"><i class="fas fa-edit"></i></el-button>
            </el-tooltip>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="custom-pagination"
      @current-change="query"
      :current-page.sync="queryParams.pageNumber"
      :page-size="queryParams.pageSize"
      layout="total, prev, pager, next, jumper"
      :total="tableDataTotal"
      style="text-align:right;">
    </el-pagination>
    <!--新增/修改用户窗口-->
    <add-edit-user v-if="showUserForm" :show.sync="showUserForm" :userData="editUserData"></add-edit-user>
    <!--绑定角色窗口-->
    <!--<bind-role :show.sync="showBindRole" :userData="editUserData"></bind-role>-->
  </div>
</template>

<script>
  import PoliceType from '../../common/PoliceTypeSelect.vue'
  import Position from '../../common/PositionSelect.vue'
  import Org from '../../common/OrgSelect.vue'
  import Available from '../../common/AvailableSelect.vue'
  import AddEditUser from './AddEditUserDialog'
  import BindRole from './BindRoleDialog'

  export default {
    components: {
      PoliceType,
      Position,
      Org,
      Available,
      AddEditUser,
      BindRole
    },
    data() {
      return {
        types :[],
        zwlbTypes : [],
        // 新增修改用户
        showUserForm: false,
        editUserData: null,
        showBindRole: false,
        // 查询参数配置
        queryParams: {
          zwlbName : '',
          roleName : '',
          username:'',
          name:'',
          state:'',
          idcard: '',
          phone: '',
          currentOrg: '',
          temporaryOrg: '',
          orgname: '',
          policeNum: '',
          category: '',
          position: '',
          pageNumber: 1,
          pageSize: 10
        },
        // 结果列表操作
        loading: false,
        selectedRows: [],
        // 查询结果
        tableData: [],
        tableDataTotal: 0
      }
    },
    mounted: function(){
      this.query();
      //加载角色下拉选
      this.api.post('/bucket-system/system/role/all')
        .then((data) => {
         this.types = data.data;
      });
    },
    methods: {
      openUserForm: function(data){
        if(data)
          this.editUserData = data;
        else
          this.editUserData = null;
        this.showUserForm = true;
      },
      openBindRole: function(data){
        if(data)
          this.editUserData = data;
        else
          this.editUserData = null;
        this.showBindRole = true;
      },
      query: function(currPage){
        if(!currPage)
          this.queryParams.pageNumber = 1;
        this.loading = true;
        this.api.post('/bucket-system/system/user/list', this.queryParams)
          .then((data) => {
            // console.log(data.data.records)
            this.tableData = data.data.records;
            this.tableDataTotal = parseInt(data.data.total);
            this.loading = false;
          });
      },
      multiSelectedChange: function(val){
        this.selectedRows = val;
      },
      enablePerms: function(id, enable){
        let _ids = [];
        let _url = '/bucket-system/system/user/disable';
        if(!id && this.selectedRows.length>0){
          this.selectedRows.forEach(function(_s, index, arr){
            _ids.push(_s.id);
          });
        }else
          _ids.push(id);
        if(enable)
          _url = '/bucket-system/system/user/enable';
        this.api.post(_url, {id: _ids.join(',')})
          .then((data) => {
            if(data.code===200){
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.query();
            }else{
              this.$message.error(data.data);
            }
          });
      },
      deletePerms: function(id){
        this.$confirm('该操作是物理删除，不可复原，是否确认删除？')
          .then(() => {
            let _ids = [];
            if(!id && this.selectedRows.length>0){
              this.selectedRows.forEach(function(_s, index, arr){
                _ids.push(_s.id);
              });
            }else
              _ids.push(id);
            this.api.post('/bucket-system/system/user/delete', {id: _ids.join(',')})
              .then((data) => {
                if(data.code===200){
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
                  this.query();
                }else{
                  this.$message.error(data.data);
                }
              });
            done();
          });
      },
      canEditDel: function(row){
        return row.username.indexOf('admin')===-1
      }
    }
  }
</script>
